<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="date"
          placeholder="选择日期"
          clearable
          size="small"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          @keyup.enter.native="handleQuery">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:goods:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:goods:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:goods:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:goods:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table ref="goodsRef" v-loading="loading" :data="goodsList" :row-class-name="tableRowClassName"
              @row-click="setImageIndex"
              @sort-change="sortChange"
              @expand-change="changeExpand"
              :default-sort="{prop: 'createTime', order: 'descending'}"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column type="expand" width="55" align="center">
        <template slot-scope="scope">
          <el-row style="margin-bottom: 15px">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="showGoodsAttr"
            >新增
            </el-button>
          </el-row>

          <el-table
            class="attrTable"
            stripe
            :data="showGoodsAttrData(scope.row.id)"
            style="width: 100%">
            <el-table-column
              type="index"
              label="#"
              prop="index"
              width="200"/>
            <el-table-column
              prop="attrName"
              label="属性名称"
              width="200">
            </el-table-column>
            <el-table-column
              prop="attrValue"
              label="参数"
              width="200">
            </el-table-column>
            <el-table-column
              label="操作"
              width="200">
              <template slot-scope="props">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  size="mini"
                  @click="showGoodsAttrDialog(props.row)"
                >修改
                </el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="delGoodsAttr(props.row.id)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--商品描述-->
          <el-input
            type="textarea"
            readonly
            resize="none"
            v-model="rowDescription">
          </el-input>

        </template>
      </el-table-column>
      <el-table-column type="index" label="#" prop="index"/>
      <el-table-column label="商品名称" align="center" prop="name"/>
      <el-table-column label="成本(元)" sortable="custom" align="center" prop="costPrice"/>
      <el-table-column label="中奖价(元)" sortable="custom" align="center" prop="winningPrice"/>
      <el-table-column label="原价(元)" sortable="custom" align="center" prop="originPrice"/>
      <el-table-column label="运费(元)" sortable="custom" align="center" prop="expressPrice"/>
      <el-table-column label="库存(件)" sortable="custom" align="center" prop="count"/>
      <el-table-column label="概率(%)" sortable="custom" align="center" prop="probability"/>
      <el-table-column label="商品图片" align="center" prop="imageUrl">
        <template v-slot="scope">
          <el-link type="primary" @click="editImage(scope.row.id)">修改图片</el-link>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" sortable prop="createTime"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:goods:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:goods:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!--修改商品属性的对话框-->
    <el-dialog title="修改属性" :visible.sync="goodsAttrVisible" id="goodsAttrDialog">
      <el-form :model="goodsAttrform" :inline="true">
        <el-form-item label="属性名称">
          <el-input v-model="goodsAttrform.attrName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数">
          <el-input v-model="goodsAttrform.attrValue"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsAttrVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateGoodsAttr">修改</el-button>
      </div>
    </el-dialog>

    <!--新增商品属性的对话框-->
    <el-dialog
      title="新增属性"
      :visible.sync="addGoodsAttrVisible"
      width="30%">
      <el-alert
        title="属性的格式为 属性名:属性值，如 内存:4G"
        type="info"
        show-icon>
      </el-alert>

      <!--输入的属性参数-->
      <el-tag
        style="margin-left: 10px"
        :key="tag"
        v-for="tag in attrArray"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
      </el-tag>
      <el-input
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else size="small" @click="showInput">+New Attribute</el-button>

      <span slot="footer" class="dialog-footer">
    <el-button @click="addGoodsAttrVisible = false">取 消</el-button>
    <el-button type="primary" @click="addGoodsAttr">确 定</el-button>
  </span>
    </el-dialog>


    <!--弹出上传图片对话框-->
    <el-dialog
      title="上传图片"
      :visible.sync="uploadVisible"
      width="40%"
      @close="clearImage"
    >
      <el-upload
        ref="upload"
        action="#"
        :on-preview="previewImage"
        :file-list="fileList"
        :on-remove="removeImage"
        :before-remove="beforeRemove"
        :auto-upload="false"
        :multiple="true"
        :http-request="uploadFile"
        :on-change="fileChange"
        accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.GIF,.PNG,.BMP"
        list-type="picture">
        <div slot="tip" class="el-upload__tip">只能上传"bmp", "gif", "jpg", "jpeg", "png"文件，且单个文件不超过10MB</div>
        <el-button size="small" type="primary">选择文件</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
    <el-button @click="uploadVisible = false">取 消</el-button>
    <el-button type="primary" @click="uploadImage" v-bind:disabled="hasReadyImage">点击上传</el-button>
      </span>
    </el-dialog>

    <!--查看图片大图-->
    <el-dialog
      close-on-click-modal
      :title="imageTitle"
      :visible.sync="imageVisible"
      class="imageDialog"
      width="50%"
    >
      <!--<svg-icon icon-class="left" class="arrow" style="height: 30px;width: 40px;transform: scale(1.5);-->
    <!--margin-right: 10px;" @click="preImage" v-if="wxImageVoList!=null"/>-->


          <el-carousel trigger="click" :autoplay="false" height="350px">
            <el-carousel-item v-for="(item,index) in wxImageVoList" :key="index">
              <el-image fit="scale-down"
                        style="width: auto"
                        :src="item.imageUrl">
              </el-image>
            </el-carousel-item>
          </el-carousel>

<!--          <li v-for="(list,index) in wxImageVoList" :key="index" v-show="index===currentIndex">
            <el-image fit="scale-down"
                      :src="list.imageUrl">
            </el-image>
          </li>-->
      <!--<svg-icon icon-class="right" class="arrow" style="height: 30px;width: 40px;transform: scale(1.5);-->
    <!--margin-left: 10px;" @click="nextImage" v-if="wxImageVoList!=null"/>-->
    </el-dialog>

    <!-- 添加或修改【商品】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入商品名称"/>
        </el-form-item>
        <el-form-item label="商品描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入商品描述"/>
        </el-form-item>
        <el-form-item label="成本" prop="costPrice">
          <el-input v-model="form.costPrice" placeholder="请输入成本（元）"/>
        </el-form-item>
        <el-form-item label="中奖价" prop="winningPrice">
          <el-input v-model="form.winningPrice" placeholder="请输入中奖价（元）"/>
        </el-form-item>
        <el-form-item label="原价" prop="originPrice">
          <el-input v-model="form.originPrice" placeholder="请输入原价（元）"/>
        </el-form-item>
        <el-form-item label="运费" prop="expressPrice">
          <el-input v-model="form.expressPrice" placeholder="请输入运费（元）"/>
        </el-form-item>
        <el-form-item label="库存" prop="count">
          <el-input v-model="form.count" placeholder="请输入库存(件)"/>
        </el-form-item>
        <el-form-item label="概率" prop="probability">
          <el-input v-model="form.probability" placeholder="请输入概率（%）"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import {getToken, setToken, removeToken} from '@/utils/auth'
  import {listGoods, getGoods, delGoods, addGoods, updateGoods, exportGoods} from "@/api/wx/goods";
  import {listImage, getImage, delImage, addImage, updateImage, exportImage} from "@/api/wx/image";
  import {listAttr, getAttr, delAttr, addAttr, updateAttr, exportAttr} from "@/api/wx/attr";

  export default {
    name: "Goods",
    data() {
      const gMap = new Map();
      const dMap = new Map();
      return {
        // 控制图片的对话框是否可见
        imageVisible: false,
        // 控制上传图片对话框是否可见
        uploadVisible: false,
        // 控制修改商品属性的对话框是否可见
        goodsAttrVisible: false,
        // 控制新增商品属性的对话框是否可见
        addGoodsAttrVisible: false,
        // 新增商品属性时，切换标签与输入框
        inputVisible: false,
        // 新增商品属性时键入的值
        inputValue: '',
        // 保存“新增商品属性”时输入的值的数组
        attrArray: [],
        // 商品属性表单
        a:'',
        goodsAttrform: {
          id: 0,
          attrName: '',
          attrValue: ''
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 【商品】表格数据
        goodsList: [],
        // 请求响应的图片集合
        wxImageVoList: [],
        // 打开上传对话框的窗口时显示的图片列表
        fileList: [],
        // 存储准备上传的文件集合
        uploadFiles: [],
        // 商品参数的数据源
        goodsAttrData:gMap ,
        descriptionData: dMap,
        rowDescription:'',
        // 行号
        rowNum: 0,
        currentIndex: 0,
        // 图片的索引
        imageIndex: 0,
        // 商品id
        goodId: 0,
        // 上传图片时的数据容器
        formData: null,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          id: null,
          name: null,
          description: null,
          costPrice: null,
          winningPrice: null,
          originPrice: null,
          expressPrice: null,
          count: null,
          probability: null,
          imageUrl: null,
          createTime: null,
          // 默认排序字段
          orderByColumn: 'createTime',
          isAsc: 'desc'
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [
            {required: true, message: "商品名称不能为空", trigger: "blur"}
          ],
          costPrice: [
            {required: true, message: "成本不能为空", trigger: "blur"}
          ],
          winningPrice: [
            {required: true, message: "中奖价不能为空", trigger: "blur"}
          ],
          originPrice: [
            {required: true, message: "原价不能为空", trigger: "blur"}
          ],
          expressPrice: [
            {required: true, message: "运费不能为空", trigger: "blur"}
          ],
          count: [
            {required: true, message: "库存不能为空", trigger: "blur"}
          ],
        }
      };
    },
    created() {
      this.getList();
    },
    computed: {
      imageTitle() {
        let title = "";
        if (this.wxImageVoList == null) {
          title = "查看图片(0/0)";
        } else {
          title = "查看图片(" + (this.currentIndex + 1) + "/" + this.wxImageVoList.length + ")";
        }
        return title;
      },
      // 是否有待上传的图片在数组中fileList
      hasReadyImage() {
        return !this.uploadFiles.some(e => {
          return e.status === 'ready';
        })
      },
    },
    methods: {
      /** 查询【商品】列表 */
      getList() {
        this.loading = true;
        listGoods(this.queryParams).then(response => {
          this.goodsList = response.rows;
          this.total = response.total;
          response.rows.forEach(e => {
            const id = e.id;
            const attrVoList = e.wxGoodsAttrVoList;
            const descr = e.description;
            this.goodsAttrData.set(id, attrVoList);
            this.descriptionData.set(id, descr);
          })
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          description: null,
          costPrice: null,
          winningPrice: null,
          originPrice: null,
          expressPrice: null,
          count: null,
          probability: null,
          imageUrl: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加商品";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getGoods(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改商品";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateGoods(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addGoods(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const goodsName = row.name;
        this.$confirm('是否确认删除"' + goodsName + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delGoods(row.id);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有【请填写功能名称】数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportGoods(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      },
      tableRowClassName({row, rowIndex}) {
        //把每一行的索引放进row
        row.index = rowIndex;
      },
      // 设置行号
      setImageIndex(row) {
        this.rowNum = row.index;
      },
      // 打开编辑图片的对话框
      async editImage(id) {
        this.goodId = id;
        const res = await this.$http.get(`/image/selectImagesBygoodsId/${this.goodId}`);
        if (res.code === 200) {
          this.wxImageVoList = res.data;
          if (this.wxImageVoList != null) {
            this.fileList = this.wxImageVoList.map(e => {
              const imageNameBeginIndex = "http://192.168.25.1:8080/profile/".length + 32;
              return {name: e.imageUrl.substring(imageNameBeginIndex), url: e.imageUrl, id: e.id};
            })
          }
        } else {
          this.$message.error("获取数据失败");
        }
        this.uploadVisible = true;
      },
      // 当关闭上传图片的对话框的时候，将内容清空
      clearImage() {
        this.fileList = [];
        this.uploadFiles = [];
      },
      // 预览图片的按钮对应的逻辑
      previewImage(file) {
        this.currentIndex = this.fileList.findIndex(e => {
          return e.uid === file.uid;
        });
        this.imageVisible = true;
      },
      beforeRemove(file) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 选择文件时先校验文件体积，再校验是否有同名文件，提示是否覆盖
      fileChange(file, fileList) {
        this.uploadFiles = fileList;
        const isLt10M = fileList.some(e => {
          // 如果其中任何一个没有是大于10M的，好事，那么结果是false
          return e.size / 1024 / 1024 > 10;
        });
        // 说明遍历的时候找到大于10M的文件了
        if (isLt10M === true) {
          this.$message.error('请上传体积小于10MB的文件');
          return false;
        }
        let findSameFile = false;
        for (let item of fileList) {
          // 根据文件名判断是否重复，但是要排除自身，这点很
          // 重要，否则每次都是判定重复
          if (file.uid === item.uid) {
            continue;
          }
          if (item.name === file.name) {
            findSameFile = true;
          }
        }
        // 如果发现存在同名文件，提示1，覆盖 2.取消该文件的上传
        if (findSameFile) {
          this.$confirm('是否覆盖原有的' + file.name + '?', '提示', {
            confirmButtonText: '确认覆盖',
            cancelButtonText: '取消该文件上传',
            type: 'warning'
          }).then(() => {
            const originImageIndex = fileList.findIndex(e => {
              return e.name === file.name;
            });
            fileList.splice(originImageIndex, 1);
            this.$message({
              type: 'success',
              message: '覆盖成功!'
            });
          }).catch(() => {
            fileList.pop();
            this.$message({
              type: 'info',
              message: '已取消该文件上传'
            });
          });
        }
      },
      // 调用图片列表的submit方法时，将数据加入进容器
      // 自带逻辑判断，不会上传已上传、已在fileList中的图片
      uploadFile(file) {
        this.formData.append('file', file.file);
      },
      // 上传图片
      uploadImage() {
        // 文件上传前的校验,总的体积小于20M
        let totalSize = 0;
        for (let item of this.uploadFiles) {
          if (item.status === 'ready') {
            totalSize += item.size;
          }
        }
        const totalSizeLimit = (totalSize / 1024 / 1024) < 20;
        if (!totalSizeLimit) {
          this.$message.error('总文件列表体积必须小于20M');
          return;
        }
        this.formData = new FormData()
        this.$refs.upload.submit();
        let config = {
          headers: {
            'Authorization': 'Bearer ' + getToken(),
            'Content-Type': 'multipart/form-data'
          }
        }
        axios.post(process.env.VUE_APP_BASE_API + '/image/addWxImages/' + this.goodId, this.formData, config)
          .then(() => {
            this.editImage(this.goodId);
            this.$message.success("上传成功")
          }).catch(() => {
          this.$message.error("上传失败")
        })
      },
      // 移除文件
      removeImage(file) {
        if (file.status === 'success') {
          // 如果文件的状态是success,说明是准备删除已经上传的文件
          const wxImage = {id: file.id, imageUrl: file.url};
          delImage(wxImage).then(() => {
            this.$message.success("删除成功")
          }).catch(() => {
            this.$message.error("删除失败")
          })
        }
      },
      // 当某一行被展开时触发
      changeExpand(row, expandedRows) {
        this.rowDescription = this.descriptionData.get(row.id)
        // 将当前行的id存起来，其实就是商品id
        this.goodId = row.id;
        // 当下拉另一个表单下拉选项时，前一个关闭
        this.expandedRows = expandedRows;
        if (expandedRows.length > 1) {
          this.$refs.goodsRef.toggleRowExpansion(this.expandedRows[0]);
        }
      },
      // 显示商品属性的数据
      showGoodsAttrData(id) {
        return this.goodsAttrData.get(id);
      },
      // 弹出商品属性的对话框
      showGoodsAttr() {
        this.attrArray = [];
        this.addGoodsAttrVisible = true;
      },
      // 在新增商品属性时，确认输入的值
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.attrArray.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      // 添加商品属性
      async addGoodsAttr() {
        const that = this;
        if (this.attrArray == null || this.attrArray.length === 0){
          return false;
        }
        // 用户输入中文冒号、英文冒号都可以
        const goodsAttrArray = this.attrArray.map(e => {
          if (e.toString().search(":") !== -1) {
            e = {"attrName": e.split(":")[0], "attrValue": e.split(":")[1], 'goodsId': this.goodId};
          }
          if (e.toString().search("：") !== -1) {
            e = {"attrName": e.split("：")[0], "attrValue": e.split("：")[1], 'goodsId': this.goodId};
          }
          return e;
        })
        const res = await this.$http.post('/attr/addGoodsAttr', goodsAttrArray);
        if (res.code === 200) {
          this.$http.get('/attr/getGoodsAttrByGoodsId/' + this.goodId)
            .then((res) => {
              const map = new Map();
              const data = res.data;
              map.set(that.goodId,data);
              that.goodsAttrData = map;
            })
          this.$message.success("添加成功")
        } else {
          this.$message.success("添加失败")
        }
        this.addGoodsAttrVisible = false;
      },
      handleClose(tag) {
        this.attrArray.splice(this.attrArray.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      // 修改商品属性时弹出对话框
      showGoodsAttrDialog(row) {
        // 先将当前属性行的行号保存下来
        this.goodsAttrform.id = row.id;
        // 将值显示到页面
        this.goodsAttrform.attrName = row.attrName;
        this.goodsAttrform.attrValue = row.attrValue;
        // 弹出对话框
        this.goodsAttrVisible = true;
      },
      // 确认修改商品属性
      async updateGoodsAttr() {
        const that = this;
        const res = await this.$http.put('/attr/editGoodsAttr', this.goodsAttrform);
        if (res.code === 200) {
          // this.getGoodsAttr();
          this.$http.get('/attr/getGoodsAttrByGoodsId/' + this.goodId)
            .then((res) => {
              const map = new Map();
              const data = res.data;
              map.set(that.goodId,data);
              that.goodsAttrData = map;
            })
          this.$message.success("修改成功")
        } else {
          this.$message.error("修改失败，请联系管理员")
        }
        this.goodsAttrVisible = false;
      },
      // 删除商品属性
      delGoodsAttr(id) {
        const that = this;
        this.$confirm('确定删除此商品参数吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$http.delete(`/attr/deleteGoodsAttr/${id}`);
          if (res.code === 200) {
            // 再查一遍，显示删除后的记录列表
            this.$http.get('/attr/getGoodsAttrByGoodsId/' + this.goodId)
              .then((res) => {
                const map = new Map();
                const data = res.data;
                map.set(that.goodId,data);
                that.goodsAttrData = map;
              })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 表格排序
      sortChange({column, prop, order}) {
        this.queryParams.orderByColumn = prop;
        this.queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc';
        this.getList();
      }

    },


  };
</script>

<style lang="less" scoped>
  .imageDialog {
    /deep/ .el-dialog__header {
      background: #333;
      .el-dialog__title {
        color: #fff;
      }
    }
  }

  .imageDialog {
    /deep/ .el-dialog__body {
      background: #333;
      display: flex;
      align-items: center;
    }
  }

  .arrow {
    color: #ffffff;
  }

  .el-image {
    width: 450px;
    height: 300px;
  }


  ul {
    padding-left: 0px;
  }


  .attrTable {
    width: fit-content !important;
    margin: auto;
  }

  .el-table /deep/ .cell {
    text-align: center;
  }
  .el-textarea /deep/ textarea{
    margin: auto;
    width: 800px;
  }
  .el-carousel{
    width: 100%;
  }
</style>
